<template>
  <view class="coupon-item u-flex-y-center" @click="handleRoute">
    <view class="coupon-left  u-flex-column u-flex-between ">
      <view class="coupon-price">￥{{item.coupon_price}}</view>
      <view class="coupon-text">代金券</view>
    </view>
    <view class="coupon-right">
      <view class="coupon-name u-flex-y-center u-flex-between">
        <text>{{item.coupon_title}}</text>
        <u-image :src="item.show?'/static/images/01_18mj.png':'/static/images/01_18efd.png'"
          @click.stop="changeItem(item)" width="34rpx" height="34rpx" :fade="false" v-if="type==2"></u-image>
        <text v-else>{{status_text}}</text>
      </view>
      <view class="coupon-desc u-m-t-16">{{item?.coupon?.xiaoqu ?? item.xiaoqu}}</view>
      <view class="coupon-time u-m-t-10">有效期{{item.start_use_time_text}}至{{item.start_use_time_text}}</view>
      <view class="u-flex-end u-flex-y-center" v-if="item.status == 0 && type == 1">
        <view class="coupon-btn" @click.stop="$u.route(`/pages/index/couponShare?id=${item.id}`)">分享朋友</view>
      </view>
      <view class="u-flex-end u-flex-y-center" v-if="type == 3 ">
        <view class="coupon-btn" @click.stop="_receive_coupon(item)">领取优惠券</view>
      </view>
      <view class="u-flex-end u-flex-y-center" v-if="type == 4 ">
        <view :class="['coupon-btn',item.is_receive?'coupon-btn-receive':'']" @click.stop="_receive_coupon(item)">
          {{item.is_receive?'已领取':'领取优惠券'}}</view>
      </view>
    </view>
  </view>


</template>

<script setup>
  import {
    computed,
    ref
  } from 'vue';
  import { couponReceive, receive_coupon } from '../../../config/api';
  const emit = defineEmits(['changeItem', 'getList'])
  const props = defineProps({
    item: {
      type: Object,
      default: () => {}
    },
    type: {
      type: [Number, String],
      default: 1
    }
  })
  const status_text = computed(() => {
    switch (+props.item.status) {
      case 0:
        return '未使用'
      case 1:
        if (props.type == 4) return ''
        else return '已使用'
      case 2:
        return '已过期'
      default:
        return '未使用'
    }
  })
  // 领取优惠券
  const _receive_coupon = (row) => {
    if (props.type == 4) {
      if (row.is_receive) return
      couponReceive({ coupon_id: row.id }).then(res => {
        uni.$u.toast('领取成功')
        emit('getList')
      })
    } else {
      receive_coupon({ coupon_id: row.id }).then(res => {
        uni.$u.toast('领取成功')
      })
    }
  }
  const handleRoute = () => {
    if (props.type == 2 || props.type == 3) return
    uni.$u.route(`/pages/index/couponShare?type=2&id=${item.id}`)
  }
  const changeItem = (row) => {
    emit('changeItem', row)
  }
</script>

<style scoped lang="scss">
  .coupon-item {
    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.06);
    border-radius: 16rpx;
    background: #fff;
    margin: 20rpx;
    padding: 20rpx 10rpx;
    min-height: 178rpx;
    border-left: 16rpx solid #E04747;

    .coupon-left {
      width: 180rpx;
      height: 100%;
      text-align: center;

      .coupon-price {
        font-size: 36rpx;
        color: #DE4242;
        font-weight: 500;
      }

      .coupon-price::first-letter {
        font-size: 24rpx;

      }

      .coupon-text {
        font-size: 24rpx;
        color: #666;
        font-weight: 500;
      }
    }

    .coupon-gap {
      height: 100%;
      width: 1px;
    }

    .coupon-right {
      flex: 1;
      padding: 0 20rpx;
      border-left: 1px dashed #707070;
      position: relative;

      image {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
      }

      .coupon-name {
        font-size: 32rpx;
        font-weight: 800;
        color: #000;

        text+text {
          font-size: 26rpx;
          font-weight: 500;
          color: #DF0F0F;
        }
      }

      .coupon-desc {
        font-size: 24rpx;
        color: #000;
      }

      .coupon-time {
        font-size: 24rpx;
        color: #666;
      }

      .coupon-btn {
        width: 152rpx;
        height: 54rpx;
        background: #E04747;
        border-radius: 28rpx;
        line-height: 54rpx;
        color: #fff;
        font-size: 24rpx;
        font-weight: 500;
        margin-top: 20rpx;
        text-align: center;
      }

      .coupon-btn+.coupon-btn {
        margin-left: 20rpx;
      }

      .coupon-btn-receive {
        background: #999;
      }
    }
  }

  .coupon-mask {
    width: 498rpx;
    height: 410rpx;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7E8E1 100%);
    border-radius: 32rpx;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 60rpx;
    text-align: center;

    image {
      width: 148rpx;
      height: 164rpx;
    }

    .mask-btn {
      width: 340rpx;
      height: 72rpx;
      background: #F87610;
      border-radius: 44rpx;
      text-align: center;
      line-height: 72rpx;
      margin: auto;
      margin-top: 70rpx;
      color: #fff;
      font-size: 28rpx;
    }
  }
</style>